<template>
    <view class="page">
        <!-- 		<z-paging
			ref="paging"
			:refresher-out-rate="0.8"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			bg-color="#fff"
			:refresher-status.sync="refresherStatus"
			v-model="dataList"
			@query="queryList"
		> -->
        <view class="search flex_wrap" slot="top">
            <template>
                <view class="search_t">
                    <view style="width: 500rpx; margin: 10rpx 0 0 20rpx">
                        <u-input
                            prefixIcon="search"
                            border="none"
                            v-model="fillterParams.goodsName"
                            prefixIconStyle="font-size: 48rpx;color: #999"
                            placeholderStyle="font-size: 28rpx;color: #999"
                            :customStyle="{ background: '#E1E1E1' }"
                            placeholder="请输入商品关键字"
                        ></u-input>
                    </view>
                    <view class="search_type" @click="doSearch">搜索</view>
                </view>
            </template>
        </view>

        <view class="my_collcent"> 我的收藏 </view>
        <!-- 查询结果 -->
        <view class="item flex_wrap row_between">
            <view
                class="cellBox"
                slot="cell"
                v-for="(item, index) in dataList"
                :key="index"
            >
                <u-cell
                    :iconStyle="cellIconStyle"
                    :titleStyle="cellTitleStyle"
                    size="large"
                    :arrow="false"
                    :border="false"
                >
                    <view slot="title" class="celldetail">
                        <image
                            :src="item.thumbnail"
                            class="celldetail-img"
							mode="aspectFit"
                            @tap="to_goodsDetail(item.id)"
                        ></image>
                        <view class="celldetail-t flex_wrap">
                            <text
                                @tap="to_goodsDetail(item.id)"
                                style="font-size: 28rpx; color: #333333"
                                >{{ item.goodsName }}</text
                            >
                        </view>
                        <view class="shopping-cart-box">
                            <view class="flex_wrap shopping-cart">
                                <view>
                                    <text style="font-size: 24rpx">￥</text>
                                    <text
                                        @tap="to_goodsDetail(item.id)"
                                        style="
                                            font-weight: 600;
                                            font-size: 34rpx;
                                        "
                                        >{{ goodsSkuListPrice(item) }}</text
                                    >
                                    <text style="font-size: 18rpx">起</text>
                                </view>
                                <u-icon
                                    name="/static/img/shop/collection-active.png"
                                    size="24"
                                    @click="cancelCollect(item.id)"
                                ></u-icon>
                            </view>
                        </view>
                    </view>
                </u-cell>
            </view>
        </view>
        <uni-load-more :status="collectStatus"></uni-load-more>
        <!-- </z-paging> -->
        <!-- 分割线 -->
        <view
            class="line"
            style="height: 14rpx; width: 100%; background-color: #f5f5f5"
        >
        </view>
        <!-- 下架商品部分 -->
        <view class="invalid">
            <view
                class="invalid_title"
                style="
                    display: flex;
                    justify-content: space-between;
                    padding: 20rpx 32rpx;
                "
            >
                <view
                    class="invalid_title_l"
                    style="font-size: 32rpx; font-weight: bold"
                >
                    失效商品
                </view>
                <view
                    class="invalid_title_r"
                    style="font-size: 28rpx; color: #588bf3; line-height: 42rpx"
                    @click="clear"
                >
                    清空失效商品
                </view>
            </view>
            <view class="invalid_content">
                <view
                    v-if="isInvalidList === false"
                    class="msg"
                    style="text-align: center; padding: 40rpx; font-size: 22rpx"
                >
                    没有更多内容
                </view>
                <view
                    class="item flex_wrap row_between"
                    v-if="isInvalidList === true"
                >
                    <view
                        class="cellBox"
                        slot="cell"
                        v-for="(item, index) in invalidList"
                        :key="index"
                    >
                        <u-cell
                            :iconStyle="cellIconStyle"
                            :titleStyle="cellTitleStyle"
                            size="large"
                            :arrow="false"
                            :border="false"
                        >
                            <view slot="title" class="celldetail">
                                <image
                                    :src="item.thumbnail"
                                    class="celldetail-img"
									mode="aspectFit"
                                ></image>
                                <view class="celldetail-t flex_wrap">
                                    <text
                                        style="font-size: 28rpx; color: #333333"
                                        >{{ item.goodsName }}</text
                                    >
                                </view>
                                <view class="shopping-cart-box">
                                    <view class="flex_wrap shopping-cart">
                                        <view>
                                            <text style="font-size: 24rpx"
                                                >￥</text
                                            >
                                            <text
                                                style="
                                                    font-weight: 600;
                                                    font-size: 34rpx;
                                                "
                                                >{{
                                                    goodsSkuListPrice(item)
                                                }}</text
                                            >
                                            <text style="font-size: 18rpx"
                                                >起</text
                                            >
                                        </view>
                                        <u-icon
                                            name="/static/img/shop/collection-active.png"
                                            size="24"
                                        ></u-icon>
                                    </view>
                                </view>
                            </view>
                        </u-cell>
                    </view>
                </view>
            </view>
        </view>
        <uni-load-more :status="invalidStatus"></uni-load-more>
    </view>
</template>
<script>
import {
    collectList,
    deleteCollect,
    getInvalidListApi,
    clearList,
} from "@/api/shop.js";
import { formatDecimal } from "@/utils/index.js";
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
export default {
    data() {
        return {
            isInvalidList: true,
            collectStatus: "more",
            invalidStatus: "more",
            goodsType: false,
            typeList: [
                { typeName: "全部" },
                { typeName: "十蜂健康套餐" },
                { typeName: "企业礼品" },
            ],
            cellIconStyle: {
                width: "36rpx",
                height: "36rpx",
                marginRight: "14rpx",
            },
            cellTitleStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            refresherStatus: 0,
            keyword: "",
            dataList: [], // 收藏列表
            fillterParams: {
                goodsName: "", // 商品名称
            },
            invalidList: [], // 失效列表
            conllectTotal: 0, // 收藏总数
            invalidTotal: 0, // 失效总数
            collectForm: {
                goodsName: "",
                // 收藏分页
                pageSize: 10,
                pageNum: 1,
            },
            invalidForm: {
                goodsName: "",
                // 失效分页
                pageSize: 10,
                pageNum: 1,
            },
            pageData: [],
        };
    },
    computed: {
        goodsSkuListPrice() {
            return (item) => {
                const money = item.minPrice || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
    },

    onLoad() {
        // 进入页面初始化数据
        uni.startPullDownRefresh();
    },

    onReachBottom() {
        let allTotal = this.collectForm.pageNum * this.collectForm.pageSize;
        if (allTotal < this.conllectTotal) {
            //当前条数小于总条数 则增加请求页数
            this.collectStatus = "loading"; //加载中状态
            this.collectForm.pageNum++;
            collectList(this.collectForm).then((res) => {
                if (res.code === 200) {
                    this.pageData = res.data.rows;
                    this.dataList = [...this.dataList, ...this.pageData];
                }
            });
        } else {
            this.collectStatus = "noMore";
        }
    },

    onPullDownRefresh() {
        this.dataList = [];
        this.collectForm.pageNum = 1;
        //调用获取数据方法
        this.getData();
        this.getInvalidData();
    },

    methods: {
        // 加载收藏列
        getData() {
            // 这里是我封装的请求方法
            collectList(this.collectForm).then((res) => {
                if (res.code == 200) {
                    this.conllectTotal = res.data.total;
                    //新数据push到列表中
                    this.dataList = res.data.rows;
                    uni.stopPullDownRefresh();
                } else {
                    console.log("请求数据失败");
                }
            });
        },

        // 加载失效列
        getInvalidData() {
            getInvalidListApi(this.invalidForm).then((res) => {
                if (res.code === 200) {
                    this.invalidTotal = res.data.total;
                    this.invalidList = res.data.rows;
                    if (this.invalidList && this.invalidList.length === 0) {
                        this.isInvalidList = false;
                    }
                } else {
                    console.log("请求失效列表失败");
                }
            });
        },

        // 跳转搜索页面
        async doSearch() {
            await (this.invalidForm.goodsName = this.fillterParams.goodsName);
            await (this.collectForm.goodsName = this.fillterParams.goodsName);
            await uni.startPullDownRefresh();
        },

        to_goodsDetail(e) {
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },

        // 取消收藏
        async cancelCollect(key) {
            const { code, data, msg } = await deleteCollect(key);
            if (code === 200) {
                const index = this.dataList.findIndex((item) => {
                    return item.id === key;
                });
                this.dataList[index].ifCollection = false;
                this.dataList.splice(index, 1);
            }
        },

        // 清空失效列
        async clear() {
            const { code, data, msg } = await clearList();
            if (code === 200) {
                this.getInvalidData();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.selectType {
    color: #588bf3;
    text-align: center;
    font-size: 28rpx !important;
    padding: 20rpx;
    height: 40rpx;
    line-height: 40rpx;
}
.normalType {
    text-align: center;
    font-size: 24rpx;
    padding: 20rpx;
    height: 40rpx;
    line-height: 40rpx;
}
.top {
    padding: 32rpx 28rpx;
}
.page {
    background-color: #ffffff;
}
.item {
    padding: 0rpx 34rpx;
    box-sizing: border-box;
    flex-flow: wrap;
}
.cellBox {
    position: relative;
    border-radius: 12rpx;
    width: 330rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
    ::v-deep .u-cell__body {
        padding: 0 !important;
    }
}
.search {
    padding: 40rpx 28rpx;
}
.search_t {
    width: 100%;
    height: 64rpx;
    background: #e1e1e1;
    border-radius: 64rpx;
    font-weight: none;
    display: flex;
    justify-content: space-between;
}
.search_type {
    width: 104rpx;
    height: 64rpx;
    background: #588bf3;
    border-radius: 0px 64rpx 64rpx 0px;
    color: #fff;
    line-height: 64rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}

.celldetail {
    width: 100%;
    height: 500rpx;
    // padding: 12rpx 12rpx 20rpx;
}
.shopping-cart-box {
    position: absolute;
    bottom: 14rpx;
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;
    .shopping-cart {
        align-items: center;
        justify-content: space-between;
        padding-right: 10rpx;
        text {
            color: #ff0000;
            font-size: 18rpx;
            font-weight: 400;
        }
    }
}
.celldetail-img {
    width: 100%;
    height: 330rpx;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
}
.my_collcent {
    padding: 0 0 20rpx 40rpx;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
}
.celldetail-t {
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;
    text {
        width: 100%;
        font-size: 24rpx;
        color: #000000;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .invalid {
        margin-top: 10px 14px;
    }
    view {
        margin: 28rpx 0 0 6rpx;
    }
}
</style>
